<template>
	<view class="change-role-clothes" id="popAll" :style="{pointerEvents:show?'fill':'none'}" :transparent="true"
		:safe-area-inset-bottom="false" :mask-custom-style="{background: 'rgba(0, 0, 0, 0)'}" mode="bottom"
		border-radius="10" :height="popHeigh" :mask-close-able="maskCloseAble" @click="handlePopClick">
		<view class="content" :style="{height:popHeigh+'rpx',bottom:show?'0rpx':-popHeigh+'rpx'}">
			<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
				<view class="clothes-item" :class="{acitveItem:acIndex== index}" v-for="(item, index) in dataList"
					:key="index" @click="handleClothesItemClick(index,item)">
					<view class="item-content">
						<image class="item-image" :class="{isSelected:acIndex==index}" :src="item.image"></image>
					</view>
					<view class="name">{{item.name}}</view>

					<view class="locked-masker" v-if="item.locked">
						<image class="locked-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
							mode=""></image>
					</view>
				</view>
			</scroll-view>

			<view class="bottom-controls">
				<view class="btn-item" :class="{dressUp:!nowIsDressUp,dressUpEd:nowIsDressUp}"
					v-if="actionType=='dressUp'&&!nowIsLocked" @click="handleControlBtnClick('dressUp')">
					<text v-if="!nowIsDressUp">装 扮</text>
					<text v-else>已装扮</text>
				</view>
				<view class="btn-item dressUp" v-if="actionType=='confirm'&&!nowIsLocked"
					@click="handleControlBtnClick('confirm')">
					确 定
				</view>
				<view class="btn-item dressUp" v-if="nowIsLocked" @click="handleControlBtnClick('buy')">去获取</view>
			</view>





		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from "vuex";
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			actionType: {
				type: String,
				default: "dressUp" //dressUp装扮  confirm
			},
			storyId: {
				type: String,
				default: ""
			},
			showConfirm: {
				type: Boolean,
				default: true
			},
			popHeigh: {
				type: [Number, String],
				default: 390
			},
			maskCloseAble: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				initialTime: 0,
				acIndex: 0,
				show: false,
				dataList: [
					// {
					// 	name: "火辣秘书",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
					// 	seekTime: 0,
					// 	roleName: "香奈",
					// 	isDefault: true,
					// 	storyId: "",
					// 	locked: false,
					// },
					// {
					// 	name: "制服诱惑",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
					// 	seekTime: 9,
					// 	roleName: "咏美",
					// 	isDefault: true,
					// 	storyId: "",
					// 	locked: false,
					// },

					// {
					// 	name: "清纯可爱",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
					// 	seekTime: 17,
					// 	roleName: "香奈",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// },
					// {
					// 	name: "邻家女孩",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/967231e3cd9c42b9886f9f5b3fedd524.jpg",
					// 	seekTime: 27,
					// 	roleName: "香奈",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// },
					// {
					// 	name: "青春活力",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
					// 	seekTime: 34,
					// 	roleName: "香奈",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// }, {
					// 	name: "青春活力-测",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
					// 	seekTime: 34,
					// 	roleName: "香奈",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// },
					// {
					// 	name: "古典风",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1da7b3d841564faa919adbbeeb31a11d.jpg",
					// 	seekTime: 43,
					// 	roleName: "咏美",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// },

					// {
					// 	name: "足球宝贝",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52b092eaf7474e90a0144af076637c97.jpg",
					// 	seekTime: 54,
					// 	roleName: "咏美",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,

					// }, {
					// 	name: "兔女郎",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d2d005909c5b44b09f30a83d10083ee2.jpg",
					// 	seekTime: 61,
					// 	roleName: "咏美",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// },

					// {
					// 	name: "兔女郎-测",
					// 	image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d2d005909c5b44b09f30a83d10083ee2.jpg",
					// 	seekTime: 61,
					// 	roleName: "咏美",
					// 	isDefault: false,
					// 	storyId: "",
					// 	locked: true,
					// },
				],

			}
		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId"]),
			nowIsLocked() {
				if (this.dataList.length) {
					let locked = !this.dataList[this.acIndex].locked ? false : true
					return locked
				} else {
					return false
				}

			},
			nowIsDressUp() {
				if (this.dataList.length) {
					let nowData = this.dataList[this.acIndex]

					if (this.initialTime === nowData.seekTime) {
						return true
					} else {
						return false
					}
				} else {
					return false
				}
			}
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (newVal === this.storyId) {
						let storyData = this.globalGameCtx.nextStorySet[newVal]
						console.log("数据是", storyData, newVal);
						this.initialTime = !storyData.initialTime ? 0 : storyData.initialTime
						let sectionsConfig = storyData.sectionsConfig
						this.dataList = sectionsConfig.map((item, index) => {
							if (item.sectionStartTime == this.initialTime) {
								this.acIndex = index
							}
							return {
								name: item.sectionName,
								image: item.coverImgUrl,
								seekTime: item.sectionStartTime,
								roleName: item.roleName,
								isDefault: !item.isDefault ? false : true,
								locked: !item.locked ? false : true,
								storyId: !item.storyId ? "" : item.storyId
							}
						})

						if (this.dataList.length) {
							this.$emit("clothesChange", this.dataList[this.acIndex])
							console.log("已经处理好数据了", this.dataList)
							let name = this.dataList[0].roleName
							if (name) {
								this.$emit("emitName", name)
							}

						}




					}
				},
				deep: true,
				immediate: true
			},
			actionType: {
				handler(newVal, oldVal) {
					if (newVal == 'confirm') {
						this.show = true
					} else {
						this.show = false
					}
				},
				deep: true,
				immediate: true
			},
			show: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit("show")
					} else {
						this.$emit("close")
					}
				}
			}


		},
		mounted() {
			// 测试时用，之后再获取dataList时调用一次即可
			// this.handleGetRoleData()
			// this.getProps()
		},
		methods: {
			handlePopClick(e) {
				if (e.target.id == "popAll" && this.maskCloseAble) {
					this.show = false
					this.$emit("close")
				}
			},
			handleBuyClothes() {
				let data = this.dataList[this.acIndex]
			},
			handleControlBtnClick(type) {
				if (type == 'dressUp') {
					if (!this.nowIsDressUp) {
						this.$emit("dressUp", this.dataList[this.acIndex])
					}
				} else if (type == 'confirm') {
					this.$emit("confirm", this.dataList[this.acIndex])
				} else if (type == 'buy') {
					this.$emit('buy', this.dataList[this.acIndex])
				}

			},
			getProps() {

			},
			handleClickConfirm() {},
			handleTabClick(type) {
				this.activeType = type
			},
			handleClothesItemClick(index, item) {
				this.acIndex = index
				this.$emit("seekTime", item.seekTime)
				this.$emit("clothesChange", item)
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-role-clothes {
		pointer-events: fill;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		z-index: 999999999999;



		.content {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 100vw;
			box-sizing: border-box;
			background-color: transparent;
			// background-color: rgba(0, 0, 0, .6);
			overflow: hidden;
			transition: bottom 0.3s;
			pointer-events: fill;

		}

		.scroll-content {
			width: 100%;
			height: 270rpx;
			// background-color: red;
			// background-color: rgba(0, 0, 0, .3);

			.clothes-item {
				position: relative;
				box-sizing: border-box;
				display: inline-block;
				width: 142.5rpx;
				height: 254rpx;
				// background-color: gold;
				margin-right: 6rpx;
				margin-top: 20rpx;
				// border-radius: 15rpx;
				border-top-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				border: 4rpx solid transparent;
				overflow: hidden;

				&:first-child {
					margin-left: 10rpx;
				}

				&:last-child {
					margin-right: 10rpx;
				}

				.locked-masker {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, .3);
					display: flex;
					justify-content: center;
					align-items: center;

					.locked-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}


				// border: 2rpx solid #000;
				.item-content {
					width: 100%;
					height: 100%;
					border-top-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;


					.item-image {
						width: 100%;
						height: 100%;
						border-top-left-radius: 15rpx;
						border-bottom-right-radius: 15rpx;
						object-fit: cover;

					}

					.isSelected {
						animation: selecteAni 0.2s linear;
					}

					@keyframes selecteAni {

						0% {
							transform: scale(1);
						}


						50% {
							transform: scale(1.2);
						}

						100% {
							transform: scale(1);
						}

					}


				}

				.name {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					height: 30rpx;
					font-size: 24rpx;
					font-weight: 700;
					line-height: 30rpx;
					color: #fff;
					text-align: center;
					text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
					background-color: rgba(0, 0, 0, .3);

				}




			}

			.acitveItem {
				border-color: #fff;
			}
		}



		.bottom-controls {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 10rpx;
			margin-top: 20rpx;

			.btn-item {
				flex: 1;
				display: inline-block;
				font-size: 30rpx;
				color: #fff;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 700;
				box-sizing: border-box;

				border-radius: 10rpx;
				line-height: 80rpx;

				&:first-child {
					margin-right: 10rpx;
				}

			}


			.dressUp {
				// background: linear-gradient(to bottom right, #ffefb4, #fcd885);
				background-color: #fcd37b;
				color: #b27439;
			}


			.dressUpEd {
				background-color: #beb3ad;
			}

			.buyed {
				background-color: #beb3ad;
			}

			.needBuy {
				background-image: linear-gradient(315deg, #3254FB 0%, #EF51F0 100%);
				;
			}

			.activeBtn {
				background-color: rgba(0, 0, 0, .3);
				border-color: transparent;
			}

		}



	}




	::v-deep {}
</style>